/**
 * 多个按钮并排，目前只支持单选
 * @author tongsitong
 */

import { Radio } from "antd";
import styled from "styled-components";
import { RadioGroupOptionType } from "antd/lib/radio";
import { useEffect, useState } from "react";

interface RadioProps {
  label: string;
  value: string | number | boolean;
}

interface CustomizeRadioProps {
  options: RadioProps[];
  value: any;   // 默认值
  labelClassName?: any;
  className?: any;
  label?: string;
  optionType?: RadioGroupOptionType;
  style?: any;
  setValue: any; // 返回值
  buttonWidth?: string | number; // 每个按钮宽度, 默认66px
}

const CustomizeRadio = (props: CustomizeRadioProps) => {
  const {
    options,
    label,
    value,
    className,
    labelClassName,
    optionType,
    style,
    buttonWidth,
    setValue
  } = props;
  
  const [localValue, setLocalValue]=useState<any>(value);

  const changeValue = (e) => {
    setLocalValue(e.target.value);
    setValue(e.target.value);
  };

  useEffect(()=>{
    setLocalValue(value)
  }, [value])
  
  return (
    <Wrapper
      className={className}
      style={style}
      buttonWidth={buttonWidth}
    >
      {label && <Label className={labelClassName}>{label}</Label>}
      <Radio.Group
        options={options}
        value={localValue}
        onChange={changeValue}
        optionType={optionType || "button"}
      />
    </Wrapper>
  );
};

export default CustomizeRadio;


const Wrapper = styled.div`
  .ant-radio-button-wrapper:not(:first-child)::before {
    width: 0;
  }

  .ant-radio-button-wrapper {
    width: ${(props)=>(props.buttonWidth? (typeof(props.buttonWidth) == 'number' ? props.buttonWidth+"px" : props.buttonWidth) : "66px")};
    height: 28px;
    padding: 0;
    color: #35425e;
    line-height: 26px;
    text-align: center;
    > span {
      font-size: 13px;
    }

    &:hover {
      color: #35425e;
      background: #f1f6ff;
      border-color: #7fa0db;

      .ant-radio-button-checked {
        border: none !important;
      }

      &::before {
        width: 1px;
        background-color: #7fa0db;
      }
    }
  }

  .ant-radio-button-wrapper-checked::before {
    width: 1px !important;
    background-color: #7fa0db;
  }

  .ant-radio-button-wrapper-checked:not(.ant-radio-button-wrapper-disabled) {
    color: #1f51a4;
    background-color: #f1f6ff;
    border-color: #7fa0db;
  }

  .ant-radio-button-wrapper-checked:not(.ant-radio-button-wrapper-disabled)::before {
    background-color: #7fa0db;
  }

  .ant-radio-button-wrapper-checked:not([class*=" ant-radio-button-wrapper-disabled"]).ant-radio-button-wrapper:first-child {
    border-right-color: #7fa0db;
  }

  .ant-radio-group
    .ant-radio-button-wrapper-checked:not(.ant-radio-button-wrapper-disabled):focus-within {
    box-shadow: 0 0 0 transparent;
  }
`;
const Label = styled.label`
  opacity: 0.7;
  /* font-family: PingFangSC-Semibold; */
  color: #35425E;
  margin-right: 8px;
  height: 28px;
  line-height: 28px;
  font-weight: bold;
`;